<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Insert title here</title>
<link rel="stylesheet" href="${pageContext.request.contextPath }/frame/layui/css/layui.css" />
<link rel="icon" href="${pageContext.request.contextPath }/image/code.png">
<link rel="stylesheet" href="${pageContext.request.contextPath }/frame/static/css/style.css">

</head>
<body class="body">

<!-- 工具集 -->
<div class="my-btn-box">
    <span class="fl">
        <a class="layui-btn layui-btn-danger radius btn-delect" id="btn-delete-all">批量删除</a>
        <a class="layui-btn btn-add btn-default" id="btn-add">添加</a>
        <a class="layui-btn btn-add btn-default" id="btn-refresh"><i class="layui-icon">&#x1002;</i></a>
    </span>
    <span class="fr">
        <span class="layui-form-label">搜索条件：</span>
        <div class="layui-input-inline">
            <input type="text" autocomplete="off" placeholder="请输入搜索条件" class="layui-input">
        </div>
        <button class="layui-btn mgl-20">查询</button>
    </span>
</div>

<!-- 表格 -->
<table id="empTable" class="layui-table" lay-filter="emp_table"></table>

<script type="text/javascript" src="${pageContext.request.contextPath }/frame/layui/layui.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/index.js"></script>
<script type="text/javascript">

	layui.use(['table', 'form', 'layer'], function () {
    // 操作对象
    var form = layui.form
            , table = layui.table
            , layer = layui.layer
            , $ = layui.jquery;

        // 表格渲染
        var tableIns = table.render({
            elem: '#empTable'                  //指定原始表格元素选择器（推荐id选择器）
            , height: 500   //容器高度
            , cols: [[                  //标题栏
                {checkbox: true, sort: true, fixed: true, space: true}
                , {field: 'eid', title: '编号',align: 'center', width: 60}
                , {field: 'ename', title: '员工名称', align: 'center',width: 100}
                , {field: 'dept', title: '所在部门',align: 'center', width: 100,toolbar: '#deptTel'}
                , {field: 'loginname', title: '登录名',align: 'center', width: 100}
                , {field: 'pwd', title: '登录密码', align: 'center',width: 100}
                , {field: 'sex', title: '员工性别',align: 'center', width: 100,toolbar:'#deptsex'}
                ,  {
                    field: 'eimg',
                    title: '员工头像',
                    width: 100,
                    align: 'center',
                    templet:'#imgtmplet' 
                }
                , {field: 'eflag', title: '员工类别', align: 'center',width: 100, toolbar:'#flagTel'}
                , {field: 'eadmin', title: '权限类别',align: 'center', width: 100,toolbar:'#adminTel'}
                , {fixed: 'right', title: '操作', width: 120, align: 'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            ]]
            , id: 'dataemp'
            , url: '${pageContext.request.contextPath }/empAction_findByPage.action?eis=1'
            , method: 'post'
            , page: true
            , limits: [10, 20, 30]
            , limit: 10 //默认采用30
            , loading: false
            
        });
      	//添加部门按钮
        $("#btn-add").click(function () {
            layer.open({
                type: 2,
                title: '添加员工',
                area: ['600px', '500px'],
                content: '${pageContext.request.contextPath}/page_emp_addEmp.action' //这里content是一个普通的String
            });
        });
     
      	//修改部门按钮
        function edit_emp(data) {
            layer.open({
                type: 2,
                title: '修改员工',
                area: ['600px', '500px'],
                content: '${pageContext.request.contextPath}/empAction_findByid.action?eid='+data.eid //这里content是一个普通的String
            });
      	}
      	//监听工具条
        table.on('tool(emp_table)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'del') { //删除
                layer.confirm('真的将该员工离职吗？', function (index) {
                    layer.close(index);
                    		//向服务端发送删除指令
	                         del_emp(obj);
                });
            } else if (layEvent === 'edit') { //编辑
                //调用编辑的方法
                edit_emp(data);
            }
        });
        function del_emp(obj) {
            var data = obj.data;
            var info = '你确定离职 <a style="color: red">' + data.ename + '</a> 吗？';
            layer.confirm(info, {icon: 3, title: '离职员工'}, function (index) {
                layer.close(index);
                //向服务端发送删除指令
                $.post('${pageContext.request.contextPath}/empAction_deleteEmp.action', {eid: data.eid},
                    function (result) {
                        if (result == 'success') {
                            layer.alert('离职成功');
                            obj.del(); //删除对应行（tr）的DOM结构
                            //重新加载数据
                            tableIns.reload();
                        } else {
                            layer.alert('撤销失败');
                        }

                    });
            });
        }
        // 刷新
        $('#btn-refresh').on('click', function () {
            tableIns.reload();
        });
    });
</script>

<%--图片--%>
<script type="text/html" id="imgtmplet">
    {{#  if(d.eimg !== ''){ }}
    <div><img src="{{d.eimg}}" class="layui-circle"
              style=" width: 29px;height: 29px;border: 1px solid plum;padding: 2px;"/></div>;
    {{#  } else { }}
    <div><img src="image/face1.jpg" class="layui-circle"
              style=" width: 29px;height: 29px;border: 1px solid hotpink;padding: 2px;"/></div>;
    {{#  } }}
</script>

<%--性别--%>
<script type="text/html" id="deptsex">
    {{#  if(d.sex === '男'){ }}
    <span style="color: #3523f5;">男<i class="layui-icon">&#xe662;</i></span>
    {{#  } else { }}
    <span style="color: #dd14f5;">女<i class="layui-icon">&#xe661;</i></span>
    {{#  } }}
</script>
<%--员工级别--%>
<script type="text/html" id="flagTel">
    {{#  if(d.eflag === 0 ){ }}
    <span style="color: #000;">普工</span>
    {{#  } else { }}
    <span style="color: #F581B1;">部门主管</span>
    {{#  } }}
</script>
<%--员工操作级别--%>
<script type="text/html" id="adminTel">
    {{#  if(d.eadmin === 0 ){ }}
    <span style="color: #000;">普通操作者</span>
    {{#  } else { }}
    <span style="color: #F581B1;">部门主管</span>
    {{#  } }}
</script>
<%--部门--%>
<script type="text/html" id="deptTel">
    {{#  if(d.dept === null){ }}
    <span style="color: #f5120c;">待议</span>
    {{#  } else { }}
    <span style="color: #000;">{{d.dept.dname}}</span>
    {{#  } }}
</script>
<!-- 表格操作按钮集 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-mini layui-btn-normal" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="del">离职</a>
</script>
</body>
</html>